<template>
  <div class="pop">
    <div class="pop-wrap">
      <div class="pop-item">姓名：{{ newPopData.hzxm }}</div>
      <div class="pop-item">房屋编号：{{ newPopData.fwbh }}</div>
      <div class="pop-item">地址：{{ newPopData.address }}</div>
      <div class="btns">
        <el-button type="primary" size="small" @click="detailFn"
          >详情列表</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch, ref } from 'vue'
const props = defineProps({
  popData: {
    type: Object,
    default: () => ({}),
  },
})

const emit = defineEmits(['updateLists','triggerDetail'])

const newPopData = reactive({})

watch(
  () => props.popData,
  (newData) => {
    if (newData) {
      Object.assign(newPopData, newData) // 更新 newPopData 的内容
    }
  },
  { immediate: true } // 在组件初始化时就进行一次赋值
)
const zcList = ref([])
const jcList = ref([])
const yhList = ref([])

const zcTotal = ref(0)
const jcTotal = ref(0)
const yhTotal = ref(0)

const detailFn = async () => {
  // await _getZcList()
  // await _getJcList()
  // await _getYhList()
  // // 将数据通过 emit 传递给父组件
  // emit('updateLists', {
  //   list: { zcList: zcList.value, jcList: jcList.value, yhList: yhList.value },
  //   total: {
  //     zcTotal: zcTotal.value,
  //     jcTotal: jcTotal.value,
  //     yhTotal: yhTotal.value,
  //   },
  // })
  emit('triggerDetail', { data: props.popData}); // 可传递数据
}
</script>

<style lang="scss" scoped>
.pop {
  width: 250px;
  height: auto;
  // border: 1px solid red;
  ::v-deep .el-descriptions__header {
    margin-bottom: 0;
  }

  ::v-deep .el-descriptions__label {
    width: 150px;
  }

  .pop-wrap {
    width: 100%;
    height: 100%;
    .pop-item {
    }
    .btns {
    }
  }
}
</style>
